{extend name="extend:iframe" /}

{block name="css"}
<link rel="stylesheet" type="text/css" href="/public/admin/css/layout.global.css" />
<style type="text/css">
	._0 p._1 {
	    display: inline-block;
	    padding: 2px 6px;
	    font-size: 12px;
	    color: #fff;
	    background-color: #5BC0DE;
	    border-radius: 4px;
	}
	._0 p._2 { font-size: 12px; }
	._0 p._2 a { font-size: 12px;color: #4C76C2; }
	._0 p._2 a:hover { text-decoration: underline; }
	
	._1 p._1 { font-size: 14px; }
	
	._2 i { font-size: 12px; }
	
	.signup { color: #F0AD4E;font-size: 16px; }
	font {
	    font-size: 12px;
	    color: #999;
	}

	.cmd-box {
		line-height: 40px;
		position: relative;
	}
	
	.select-box {
		display: none;
		width: 100%;
		box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.08);
		padding: 0;
		margin: 0;
		list-style: none;
		background-color: #FFFFFF;
		position: absolute;
		top: 40px;
		left: 0;
	}
	
	.cmd-box:hover .select-box {
		display: block;
		z-index: 9;
	}
	
	.select-box li {
		line-height: 32px;
		border-bottom: 1px solid #EDEDED;
	}
	
	.select-box li:hover {
		background-color: #FCFCFC;
	}
	
	.select-box li a {
		font-size: 14px;
	}
</style>
{/block}


{block name="body"}
<div class="_title">
    <div class="_main">路演活动</div>
    <div class="_sub clearfix">
        <div class="_btns">
            <ul class="clearfix">
                <li class="active" layout-mark="list-model" data-model="0">全部</li>
                <li layout-mark="list-model" data-model="1">未开始</li>
                <li layout-mark="list-model" data-model="2">进行中</li>
                <li layout-mark="list-model" data-model="3">已结束</li>
                <li layout-mark="link" data-href="/admin/act/act.html">发布活动</li>
            </ul>
        </div>
        <div class="_search clearfix">
            <select layout-mark="list-type">
            <option selected value="0">全部</option>
            <option value="1">自办型</option>
            <option value="2">外链型</option>
            </select>
            <input type="text" name="skey" placeholder="标题" />
            <a href="javascript:;" layout-mark="list-skey"><i class="icon-search_-for"></i></a>
        </div>
    </div>
</div>
<div class="_content">
    <table width="100%">
        <tr>
            <th>活动</th>
            <th>地点</th>
            <th>主办方</th>
            <th>活动时间</th>
            <th>报名人数</th>
            <th class="text-center">操作</th>
        </tr>
        <tbody id="activity-volist-view">

		</tbody>
    </table>
</div>
<div class="loadmore-modal">
	<a href="javascript:;">点击加载更多</a>
</div>
{/block}


{block name="js"}
<script type="text/html" id="activity-volist-template">
	{{# for ( var i in d ) { }} 
		{{# var list = d[i]; }}
		<tr data-id="{{ list.id }}">
			<td>
				<div class="_0">
					{{# if ( list.type == 0 ) { }}
						<p class="_1">自办型</p>
					{{# } else { }}
						<p class="_1">外链型</p>
					{{# } }}
					<p class="_2"><a href="/activity/{{ list.id }}.html" target="_blank">{{ list.title }}</a></p>
				</div>
			</td>
			<td>
				<div class="_1">
					<p class="_1">{{ list.localtion }}</p>
					<p class="_2"><font>{{ list.address }}</font></p>
				</div>
			</td>
			<td>{{ list.organizers }}</td>
			<td>
				<div class="_2">
					<p class="_1">
						<i class="icon-time" style="color:#1AAD19;"></i> 
						<font>{{ tool.formatDate(list.start_time) }}</font>
					</p>
                    <p class="_2">
                    	<i class="icon-time" style="color:#D9534F;"></i> 
                    	<font>{{ tool.formatDate(list.end_time) }}</font>
                    </p>
				</div>
			</td>
			<td class="signup">{{ list.signup || 0 }}</td>
			<td class="text-center cmd-box">
				<i class="icon-down" style="cursor: pointer;"></i>
				<ul class="select-box">
					<li>
						<a href="/activity/{{ list.id }}.html" target="_blank" style="display: block;">查看</a>
					</li>
					<li>
						<a href="/admin/act/act.html?actid={{ list.id }}" style="display: block;">编辑</a>
					</li>
					<li>
						<a href="javascript:;" style="display: block;" data-cmd="sc" data-id="{{ list.id }}" data-status="0">删除</a>
					</li>
				</ul>
			</td>
		</tr>
	{{# } }}
</script>
<script type="text/javascript" src="/public/plug/layer/layer.min.js"></script>
<script type="text/javascript" src="/public/plug/laytpl/laytpl.min.js"></script>
<script type="text/javascript" src="/public/modules/tool.js"></script>
<script type="text/javascript" src="/public/modules/interactive.js"></script>
<script type="text/javascript">
	$(function() {
		// 页面跳转
		$('li[layout-mark=link]').on('click', function() {
			window.location.href = $(this).attr('data-href');
		});
		
		// 删除
		$('#activity-volist-view').on('click', 'a[data-cmd="sc"]', function() {
			var that = $(this),
				_id = that.attr('data-id'),
				data_opt = {
					'id': _id
				};
			layer.open({
				type: 0,
				title: '提示',
				content: '是否删除',
				btn: ['确定', '取消'],
				yes: function(index) {
					layer.load(0, {
						shade: [0.08, '#000']
					});
					ajax().del('/api?activity.admin.delete', data_opt, function(res) {
						layer.closeAll('loading');
						if(res.status == 204) {
							window.parent.system.success('删除成功', function() {
								$('tr[data-id=' + _id + ']').remove();
							});
						} else {
							window.parent.system.error(res.error);
						}
					});
					layer.close(index);
				},
				btn2: function(index) {
					layer.close(index);
				}
			});
		});
		
		// 模式
		$('li[layout-mark=list-model]').on('click', function(e) {
			$('#activity-volist-view').html('');
			data_opt_volist['model'] = $(this).attr('data-model');
			data_opt_volist['page'] = 1;
			getActivityVolist();
		});
		
		// 搜索
		$('a[layout-mark=list-skey]').on('click', function(e) {
			var skey = $.trim($('input[name=skey]').val());
			$('#activity-volist-view').html('');
			data_opt_volist['skey'] = skey;
			data_opt_volist['page'] = 1;
			getActivityVolist();
		});
		
		// 类型
		$('select[layout-mark=list-type]').on('change', function(e) {
			$('#activity-volist-view').html('');
			data_opt_volist['type'] = $(this).val();
			data_opt_volist['page'] = 1;
			getActivityVolist();
		});
		
		// 加载更多
		$('.loadmore-modal a').on('click', function(e) {
			var next = $(this).data('next');
			if(next > 0) {
				data_opt_volist['page'] = next;
				getActivityVolist();
			}
		});
	});
	
	var template = document.getElementById('activity-volist-template').innerHTML,
		data_opt_volist = dataOptVolist();
	
	// 加载列表
	function getActivityVolist() {
		layer.load(0, {
			shade: [0.08, '#000']
		});
		ajax().get('/api?activity.admin.volist', data_opt_volist, function(res) {
			layer.closeAll('loading');
			if(res.status >= 200 && res.status < 300) {
				$('.loadmore-modal a').data('next', res.data.next);
				if(res.data.list.length > 0) {
					// 渲染列表
					var tpl = laytpl(template);
					$('#activity-volist-view').append(tpl.render(res.data.list));
					// 判断是否有分页
					if(res.data.next > res.data.page) {
						$('.loadmore-modal a').html('点击加载更多');
					} else {
						$('.loadmore-modal a').html('');
					}
				} else {
					$('.loadmore-modal a').html('暂无记录');
				}
			} else {
				window.parent.system.error(res.error);
			}
			// 重置页面高度
			resetIframeHeight();
		});
	}
	
	getActivityVolist();
	
	function dataOptVolist(opts) {
		return tool.optionExtend({
			'page': 1, // 当前页数
			'show': 10, // 显示条数
			'model': 0, // 模式,0-全部(默认) 1-未开始 2-进行中 3-已结束
			'type': 0, // 类型,0-全部(默认) 1-自办型 2-外链型
			'skey': '' // 搜索关键词,活动名称
		}, opts || {});
	}
</script>
{/block}